<template>
    <codemirror 
    v-model="code" 
    placeholder="Code goes here..." 
    :style="{ height: '400px' }" 
    :autofocus="true"
    :indent-with-tab="true" 
    :tab-size="2" 
    :extensions="extensions" 
    @ready="handleReady" 
    />
</template>

<script setup>
import { ref, shallowRef,computed } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { json, jsonParseLinter } from '@codemirror/lang-json'
import { linter } from '@codemirror/lint'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const code = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue',value)
    }
})

const extensions = [json(),linter(jsonParseLinter())]

// Codemirror EditorView instance ref
const view = shallowRef()
const handleReady = (payload) => {
    view.value = payload.view
}

// Status is available at all times via Codemirror EditorView
const getCodemirrorStates = () => {
    const state = view.value.state
    const ranges = state.selection.ranges
    const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
    const cursor = ranges[0].anchor
    const length = state.doc.length
    const lines = state.doc.lines
    // more state info ...
    // return ...
}




</script>